<template>
  <div class="border">
    <div class="lan"></div>
    <span class="p">产品列表</span>
    <div class="erhang">
      <el-input
        placeholder="请输入内容"
        v-model="input4"
        style="margin-left: 2%; width: 20%"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>

      <el-button
        type="primary"
        style="margin-left: 2%; background-color: #2d8cf0"
        @click="selectVal"
        >搜索</el-button
      >
      <!-- <el-button
        type="primary"
        style="margin-left: 25%; background-color: #2d8cf0"
        @click="addType"
        >新增秒杀产品</el-button
      > -->
    </div>
    <div class="table" style="font-size: 10px">
      <el-table
        :data="list1"
        stripe
        style="width: 98%; font-size: 15px"
        size="mini"
        id="out-table"
      >
        <el-table-column prop="id" label="序号" align="center" min-width="15%">
        </el-table-column>
        <el-table-column
          prop="proname"
          label="产品名称"
          align="center"
          min-width="15%"
        >
        </el-table-column>
        <el-table-column
          prop="purCount"
          label="秒杀剩余数量"
          align="center"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="surpluscount"
          label="总产品数量"
          align="center"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="产品价格"
          align="center"
          min-width="10%"
        >
        </el-table-column>

        <el-table-column
          prop="definite"
          label="产品描述"
          align="center"
          min-width="25%"
        >
        </el-table-column>
        <el-table-column
          label="秒杀时间"
          prop="startDate"
          min-width="15%"
        ></el-table-column>
        <el-table-column
          prop="bannerId"
          label="操作"
          align="center"
          min-width="15%"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="create(scope.row)"
              >编辑</el-button
            >

            <el-button type="text" size="mini" @click="deleteById(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
window.Event = new Vue();
import axios from "axios";
export default {
  data() {
    return {
      input4: "",
      list1:''
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios({
        url: "/api/second/findSecAll",
        method: "GET",
        params: {
          proname: this.input4,
        },
      }).then((res) => {
        this.list1 = res.data;
      });
    },
    selectVal() {
      this.getList();
    },
    deleteById(sss) {
      axios({
        url: "/api/second/delSecPro",
        method: "GET",
        params: {
          id: sss.id,
        },
      }).then((res) => {
        this.getList();
      });
    },
    create(sss) {
      this.$router.push({ path: "/editKill" + "", query: { id: sss.id } });
    },
    addType() {
      this.$router.push({ path: "/addPro" });
    },
  },
};
</script>

<style>
html,
body {
  height: 100%;
  background-color: #f2f7fb;
}

.table {
  margin-top: 20px;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

html {
  display: block;
}

.border {
  border-width: 0px;
  /* position: absolute; */
  left: 0px;
  top: 0px;
  width: 88%;
  height: 912px;
  background: inherit;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 6%;
  margin-top: 10px;
}

.erhang {
  margin-top: 20px;
}

.lan {
  border-width: 0px;
  left: 0px;
  top: 0px;
  width: 6px;
  height: 20px;
  background: inherit;
  background-color: rgba(41, 132, 248, 1);
  border: none;
  border-radius: 8px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 20px;
  margin-top: 10px;
  display: inline-block;
}

.p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  font-kerning: normal;
  margin-left: 30px;
  display: inline-block;
  margin-top: 10px;
}

.el-switch__label--left {
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}

.el-switch__core {
  width: 50px !important;
}

.el-switch__label--right {
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}

.el-switch__label--right.is-active {
  z-index: 1111;
  color: #fff !important;
}

.el-switch__label--left.is-active {
  z-index: 1111;
  color: #9c9c9c !important;
}
</style>